<template>
    <div class="my-verification-box">
        <!-- <h1>验证您的邮箱</h1>
        <p>验证码已发送至您的邮箱，有效期10分钟。</p> -->
        <div class="my-verification-code-inputs">
            <input v-for="(digit, index) in 6" :key="index" type="text" maxlength="1" class="my-custom-code"
                v-model="verificationCode[index]" @input="handleInput($event, index)"
                @keydown="handleKeydown($event, index)" ref="codeInputs" />
        </div>
        <!-- <div class="my-resend" @click="handleResend">重新发送</div>
        <button class="my-confirm-button" @click="handleConfirm">确认</button>
        <div class="my-help-link">
            <a class="my-resend-a" href="#" @click.prevent="handleHelp">收不到验证码？</a>
        </div> -->
    </div>
</template>

<script>
export default {
    name: "VerificationCode",
    data() {
        return {
            verificationCode: ['', '', '', '', '', ''],
            isAllFilled: false
        };
    },
    watch: {
        verificationCode: {
            handler(newVal) {
                // 检查是否所有输入框都已填写
                this.isAllFilled = newVal.every(code => code !== '');
                if (this.isAllFilled) {
                    // 所有输入框都已填写，可以在这里触发相应操作
                    console.log('验证码已完整输入：', newVal.join(''));
                    // 触发自定义事件
                    const code = newVal.join('');
                    console.log("验证码:", code);

                    const originalInputs = document.querySelectorAll(
                          ".dYWRoF > .bKkbVp > .verify-code-item"
                    );
                    // console.log(originalInputs,'originalInputs')
                    if (originalInputs.length === 6) {
                        Array.from(originalInputs).forEach((input, index) => {
                            input.value = code[index] || "";
                            input.dispatchEvent(new Event("input", { bubbles: true }));
                        });

                        // const loginButton = document.querySelector(
                        //     ".verify-button-container button"
                        // );
                        // if (loginButton) {
                        //     loginButton.click();
                        // }
                    } else {
                        console.error("未找到原有的验证码输入框或数量不正确");
                    }
                }
            },
            deep: true
        }
    },
    methods: {
        handleInput(event, index) {
            if (event.target.value.length === 1 && index < 5) {
                this.$refs.codeInputs[index + 1].focus();
            }
            // 在输入处理完成后检查是否所有框都已填写
            this.checkAllFilled();
        },
        handleKeydown(event, index) {
            if (
                event.key === "Backspace" &&
                index > 0 &&
                !this.verificationCode[index]
            ) {
                this.$refs.codeInputs[index - 1].focus();
            }
        },
        handleResend() {
            console.log("重新发送验证码");
        },
        handleConfirm() {
            const code = this.verificationCode.join("");
            console.log("验证码:", code);

            const originalInputs = document.querySelectorAll(
                ".dYWRoF > .bKkbVp > .verify-code-item"
            );
            // console.log(originalInputs,'originalInputs')
            if (originalInputs.length === 6) {
                Array.from(originalInputs).forEach((input, index) => {
                    input.value = code[index] || "";
                    input.dispatchEvent(new Event("input", { bubbles: true }));
                });

                const loginButton = document.querySelector(
                    ".verify-button-container button"
                );
                if (loginButton) {
                    loginButton.click();
                }
            } else {
                console.error("未找到原有的验证码输入框或数量不正确");
            }
        },
        handleHelp() {
            console.log("帮助信息");
        },
        checkAllFilled() {
            this.isAllFilled = this.verificationCode.every(code => code !== '');
        }
    },
};
</script>

<style scoped>
.my-verification-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.0);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* pointer-events: auto; */
}

.my-verification-box {
    background: #fff;
    border-radius: 16px;
    /* box-shadow: 0 8px 32px rgba(0,0,0,0.10); */
    /* padding: 16px 32px 24px 32px; */
    min-width: 420px;
    max-width: 588px;
    /* height: 335px; */
    width: 100%;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* height: 335px; */
}

.my-verification-box h1 {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #222;
    text-align: left;
    width: 100%;
}

.my-verification-box p {
    font-size: 15px;
    color: #666;
    margin-bottom: 18px;
    text-align: left;
    width: 100%;
}

.my-verification-code-inputs {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    /* margin-bottom: 18px; */
    width: 100%;
}

.my-verification-code-inputs input {
    width: 48px;
    height: 56px;
    font-size: 24px;
    text-align: center;
    border: 1.5px solid #f0f0f0;
    border-radius: 8px;
    background: #fafbfc;
    color: #222;
    outline: none;
    transition: border 0.2s;
    box-shadow: none;
}

/* .my-verification-code-inputs input:focus {
  border: 1.5px solid #007bff;
  background: #fff;
} */

.my-resend {
    font-size: 15px;
    color: #222;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 18px;
    align-self: flex-start;
}

.my-confirm-button {
    width: 100%;
    padding: 16px 0;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.my-confirm-button:hover {
    background: #444;
}

.my-help-link {
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    width: 100%;
    text-align: center;
}

.my-help-link a {
    color: #222;
    text-decoration: none;
}

.my-help-link a:hover {
    text-decoration: underline;
}
</style>